<template>
  <el-dialog
    :title="title"
    :visible="visible"
    width="1200px"
    :modal="false"
    :before-close="closeForm"
    :close-on-click-modal="false"
  >
    <el-card header="流程列表">
      <el-form :inline="true" :model="queryParam">
        <el-form-item label="关键字">
          <el-input
            v-model="queryParam.QueryKey"
            placeholder="表单名"
            style="width: 200px"
            @change="loadGrid"
          />
        </el-form-item>
      </el-form>
      <w-table
        :data="flowList"
        :columns="columns"
        :is-paging="true"
        :is-select="true"
        :is-multiple="false"
        :select-keys="chioseKey"
        :paging="paging"
        row-key="Id"
        @selected="selected"
        @load="loadGrid"
      >
        <template slot="formType" slot-scope="e">
          <span v-if="formTypeDic[e.row.FormType]"> {{ formTypeDic[e.row.FormType].DicText }}</span>
        </template>
        <template slot="action" slot-scope="e">
          <el-button size="mini" type="primary" icon="el-icon-view" @click="show(e.row)">预览</el-button>
        </template>
      </w-table>
    </el-card>
    <el-row slot="footer" style="text-align: center; margin-top: 20px">
      <el-button @click="resetChiose">重 置</el-button>
      <el-button type="primary" @click="save">保 存</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import {
  DictItemDic
} from '@/customForm/config/formConfig'
import * as flowApi from '../../api/flow'
export default {
  components: {
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '选择流程'
    },
    flowType: {
      type: String,
      default: null
    },
    value: {
      type: String,
      default: null
    },
    flowVer: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      DictItemDic,
      flowList: [],
      columns: [
        {
          key: 'FlowName',
          title: '流程名',
          align: 'left',
          minWidth: 250
        },
        {
          key: 'Remark',
          title: '备注',
          align: 'left',
          minWidth: 150
        },
        {
          key: 'VerNum',
          title: '版本号',
          align: 'center',
          width: 120
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      queryParam: {
        FlowType: null,
        Status: [1],
        QueryKey: null
      },
      chioseKey: null,
      cache: {},
      isload: false
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  methods: {
    selected(e) {
      this.isload = true
      this.chioseKey = e.keys
      this.isload = false
    },
    resetChiose() {
      this.queryParam.QueryKey = null
      if (this.value != null) {
        this.chioseKey = [this.value]
      } else {
        this.chioseKey = []
      }
      this.loadGrid()
    },
    reset() {
      this.cache = {}
      if (this.flowType != null) {
        this.queryParam.FlowType = this.flowType
      } else {
        this.queryParam.FlowType = null
      }
      this.resetChiose()
    },
    save() {
      let flowId = null
      let ver = null
      let flow = null
      if (this.chioseKey.length !== 0) {
        flowId = this.chioseKey[0]
        flow = this.cache[flowId]
        ver = flow.VerNum
      }
      this.$emit('update:visible', false)
      this.$emit('update:flowVer', ver)
      this.$emit('input', flowId)
      this.$emit('change', flowId, flow)
    },
    async loadGrid() {
      const data = await flowApi.Query(this.queryParam, this.paging)
      this.paging.Total = data.Count
      this.flowList = data.List
      this.loadCache(this.flowList)
    },
    loadCache(list) {
      list.forEach(c => {
        this.cache[c.Id] = c
        if (c.Children != null) {
          this.loadCache(c.Children)
        }
      })
    },
    closeForm() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style type="less" scoped>
.searchLine .el-form-item{
 margin-right: 10px;
}
</style>
